<template>
  <v-dialog max-width="600" :model-value="modelValue" @update:model-value="handleClose">
    <v-card>
      <v-card-title class="d-flex align-center">
        <v-icon class="mr-2" :icon="mdiFilter" />
        {{ t('title') }}
        <v-spacer />
        <v-btn :icon="mdiClose" variant="text" @click="handleClose" />
      </v-card-title>

      <v-divider />

      <v-card-text class="pt-4">
        <!-- 笔记类型 -->
        <v-select
          v-model="localFilters.category"
          clearable
          item-title="label"
          item-value="value"
          :items="noteCategories"
          :label="t('type')"
          :prepend-icon="mdiShape"
          variant="outlined"
        />

        <!-- 关键词搜索 -->
        <v-text-field
          v-model="localFilters.keyword"
          clearable
          :label="t('keyword')"
          :placeholder="t('keywordPlaceholder')"
          :prepend-icon="mdiMagnify"
          variant="outlined"
        />

        <!-- 排序方式 -->
        <v-select
          v-model="localFilters.order_by"
          item-title="label"
          item-value="value"
          :items="orderByOptions"
          :label="t('orderBy')"
          :prepend-icon="mdiSort"
          variant="outlined"
        />

        <!-- 排序方向 -->
        <v-select
          v-model="localFilters.order_direction"
          item-title="label"
          item-value="value"
          :items="orderDirectionOptions"
          :label="t('orderDirection')"
          :prepend-icon="mdiSwapVertical"
          variant="outlined"
        />
      </v-card-text>

      <v-divider />

      <v-card-actions>
        <v-btn variant="text" @click="handleReset">
          {{ t('reset') }}
        </v-btn>
        <v-spacer />
        <v-btn variant="text" @click="handleClose">
          {{ t('cancel') }}
        </v-btn>
        <v-btn color="primary" variant="elevated" @click="handleApply">
          {{ t('apply') }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { mdiClose, mdiFilter, mdiMagnify, mdiShape, mdiSort, mdiSwapVertical } from '@mdi/js'
import type { QueryNoteParams } from '../types'

const props = defineProps<{
  modelValue: boolean
  filters: QueryNoteParams
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  apply: [filters: QueryNoteParams]
}>()

const { t } = useI18n()

// 本地筛选条件
const localFilters = ref<QueryNoteParams>({ ...props.filters })

// 类型类别（简化为三类）
const noteCategories = computed(() => [
  { label: t('noteType.mail'), value: 'mail' },
  { label: t('noteType.calendar'), value: 'calendar' },
  { label: t('noteType.note'), value: 'note' }
])

// 排序字段选项
const orderByOptions = computed(() => [
  { label: t('orderByCreated'), value: 'created_at' },
  { label: t('orderByUpdated'), value: 'updated_at' }
])

// 排序方向选项
const orderDirectionOptions = computed(() => [
  { label: t('orderDesc'), value: 'desc' },
  { label: t('orderAsc'), value: 'asc' }
])

// 监听 filters 变化
watch(
  () => props.filters,
  newFilters => {
    localFilters.value = { ...newFilters }
  },
  { deep: true }
)

// 处理应用
function handleApply() {
  const payload = { ...localFilters.value }
  // 将类别映射到精确类型：mail -> email, calendar -> event, note -> undefined
  switch (payload.category) {
    case 'mail': {
      payload.type = 'email'
      break
    }
    case 'calendar': {
      payload.type = 'event'
      break
    }
    case 'note': {
      {
        payload.type = undefined
        // No default
      }
      break
    }
  }
  emit('apply', payload)
}

// 处理重置
function handleReset() {
  localFilters.value = {
    limit: 20,
    offset: 0,
    order_by: 'created_at',
    order_direction: 'desc',
    category: undefined,
    type: undefined
  }
}

// 处理关闭
function handleClose() {
  emit('update:modelValue', false)
}
</script>

<i18n>
{
  "zhHans": {
    "title": "筛选记录",
    "type": "记录类型",
    "keyword": "关键词",
    "keywordPlaceholder": "搜索标题或内容",

    "orderBy": "排序方式",
    "orderByCreated": "创建时间",
    "orderByUpdated": "更新时间",
    "orderDirection": "排序方向",
    "orderDesc": "降序（新到旧）",
    "orderAsc": "升序（旧到新）",
    "noteType": {
      "mail": "邮件",
      "calendar": "日历",
      "note": "记录"
    },
    "reset": "重置",
    "cancel": "取消",
    "apply": "应用"
  },
  "en": {
    "title": "Filter Entries",
    "type": "Entry Type",
    "keyword": "Keyword",
    "keywordPlaceholder": "Search title or content",

    "orderBy": "Sort By",
    "orderByCreated": "Created Time",
    "orderByUpdated": "Updated Time",
    "orderDirection": "Sort Direction",
    "orderDesc": "Descending (New to Old)",
    "orderAsc": "Ascending (Old to New)",
    "noteType": {
      "mail": "Mail",
      "calendar": "Calendar",
      "note": "Entry"
    },
    "reset": "Reset",
    "cancel": "Cancel",
    "apply": "Apply"
  }
}
</i18n>
